<template>
    <ul class="flex pa12">
        <li :style="{ width: leftCardWidth }">
            <el-card shadow="always">
                <div :style="{ height: formContainerHeight }" class="f-column">
                    <el-tabs v-if="leftTabs.length" v-model="tabActive" class="tabs__disabled--color">
                        <el-tab-pane v-for="(label,i) in leftTabs" :label="label" disabled :name="i"/>
                    </el-tabs>
                    <el-scrollbar height="100%">
                        <div :style="{ minWidth: leftMinWidth }">
                            <slot/>
                        </div>
                    </el-scrollbar>
                </div>
            </el-card>
        </li>
        <li v-if="showRight" :style="{ width: rightWidth, marginLeft: spacingRightMarginLeft }">
            <el-card shadow="always">
                <div :style="{ height: formContainerHeight }" class="f-column">
                    <el-tabs v-if="rightTabs.length" v-model="tabRightActive" class="tabs__justify-around">
                        <el-tab-pane v-for="(label,i) in rightTabs" :label="label" :name="i"/>
                    </el-tabs>
                    <el-scrollbar height="100%">
                        <slot name="right" :active="tabRightActive"/>
                    </el-scrollbar>
                </div>
            </el-card>
        </li>
    </ul>
    <footer v-if="!hideFooter" class="form-container-footer border-t">
        <slot name="footer"/>
    </footer>
</template>

<script setup lang="ts">
    import { computed, ref } from "vue";
    import { _layoutStore } from "@/store/config";

    const props = defineProps({
        leftTabs: {
            type: Array,
            default: () => {
                return []
            }
        },
        leftMinWidth: {
            type: String,
            default: 'auto'
            // default: '660px'
        },
        active: {
            type: Number,
            default: 0
        },
        rightTabs: {
            type: Array,
            default: () => {
                return []
            }
        },
        showRight: {
            type: Boolean,
            default: true
        },
        rightWidth: {
            type: String,
            default: '340px'
        },
        hideFooter: {
            type: Boolean,
            default: false
        },
    })

    const formContainerHeight = computed(() => {
        return `calc(100vh - ${_layoutStore.LHeaderHMbBreadcrumbH + (props.hideFooter ? 0 : 70) + 24}px)`;
    })

    const spacingRightMarginLeft = ref<string>('12px');
    const leftCardWidth = computed(() => {
        return props.showRight ? `calc(100% - ${props.rightWidth} - ${spacingRightMarginLeft.value})` : '100%'
    })

    const tabActive = computed(() => {
        return props.active
    })
    const tabRightActive = ref<number>(0);

    defineExpose({
        tabRightActive
    })
</script>

<style scoped lang="scss">
    .tabs__disabled--color {
        :deep(.el-tabs__item.is-active) {
            color: #FFFFFF;
        }
    }

    .tabs__justify-around {
        :deep(.el-tabs__nav-scroll) {
            @include flex;
            @include justify-around;
        }

        :deep(.el-tabs__item) {
            padding: 0 25px;
        }
    }

    :deep(.el-card) {
        border: none;
    }

    :deep(.el-card__body) {
        padding: 0;
    }

    :deep(.el-tabs__header.is-top) {
        margin-bottom: 0;
    }

    .form-container-footer {
        @include flex;
        @include items-center;
        height: 70px;
        padding: 0 20px;
        box-sizing: border-box;
    }
</style>